<template>
  <div id="commodity">
    <div class="boxx">
      <div class="imgBox">
        <img :src="imgs" alt="">
      </div>
      <div class="Commodity-bot">
        <slot name="title">
          <p class="titleCom">{{name}}</p>
          <div class="box">
            <span class="price-left">￥{{price}}</span>
            <span class="price-right">￥{{delPrice}}</span>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {}
  },
  props: {
    imgs: {
      type: String,
      default: 'https://bpic.51yuansu.com/pic3/cover/01/55/70/594c83ce7e5b3_610.jpg'
    },
    name: {
      type: String,
      default: '商品名字'
    },
    price: {
      type: [String, Number],
      default: '价格'
    },
    delPrice: {
      type: [String, Number],
      default: '删除线价格'
    }
  },
  // 方法集合
  methods: {}
}
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.boxx {
}
#commodity {
  display: flex;
  flex-wrap: wrap;
  height: 396px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  width: 375px;
  overflow: hidden;
  .imgBox {
    width: 373px;
    height: 300px;
    overflow: hidden;
    // margin-bottom: -10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .Commodity-bot {
    width: 375px;
    height: 96px;
    margin-top: 20px;
    .titleCom {
      color: #666;
      font-size: 26px;
      padding-left: 16px;
      margin-bottom: -14px;
      width: 373px;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price-left {
      padding-left: 16px;
      // margin-top: -10px;
      font-size: 26px;
      margin-right: 10px;
    }
    .price-right {
      // margin-top: -10px;
      font-size: 16px;
      color: #aaa;
      text-decoration: line-through;
    }
  }
}
</style>